<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	    <style>
	    	div{
	    	   width: 60%;
	    	}
	    	table{
	    		width: 80%;
	    		text-align: center;
	    	}
	    </style>
	</head>
	<body>
		<div>
			姓名：<input type="text" id="Name"/>
			年龄：<input type="number" id="Year"/>
			性别：<input type="text" id="sex"/>
			爱好：<input type="text" id="aihao"/>
			<button type="button" id="add" >添加</button>
			<button type="button" id="clearall" >清空</button>
			<table border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>爱好</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!--<tr>  <td>1</td>  <td>xx</td> <td>ss</td> <td>dd</td>  <td></td>  <td> <button type="button">上移</button>  <button type="button">删除</button> <button type="button">下移</button> </td> </tr>-->
				</tbody>
			</table>
		</div>
		<script>
			var add=document.getElementById("add")
			var Name=document.getElementById("Name");
			var Year=document.getElementById("Year");
			var sex=document.getElementById("sex");
			var aihao=document.getElementById("aihao");
			var tbody=document.querySelector("tbody");
			
			if(localStorage.arr){
				var arr=JSON.parse(localStorage.arr);
			}else{
				var arr=[];
			}
			showtBody(arr);
			
			add.onclick=function(){
				var obj={
					id: +new Date(),
					name: Name.value,
					year: Year.value,
					sex: sex.value,
					aihao: aihao.value,
				}
				arr.push(obj);
				Name.value="";
			    Year.value=""
				sex.value=""
				aihao.value=""
				
			    localStorage.arr=JSON.stringify(arr);
			    showtBody(arr)
			}
			
			function showtBody(arr){
				var str = '' ;
				for (var i=0;i<arr.length;i++) {
					str += `
					      <tr>  
					           <td>${i+1}</td>  
					           <td>${arr[i].name}</td>
					           <td>${arr[i].year}</td>
					           <td>${arr[i].sex}</td>
					           <td>${arr[i].aihao}</td>
					           <td>
					                <button type="button" onclick="atDOWN(${arr[i].id})" class="a1" >上移</button>  
					                <button type="button" onclick="clearIt(${arr[i].id})">删除</button> 
					                <button type="button" onclick="ATup(${arr[i].id})" class="a2">下移</button> 
					           </td> 
					      </tr>
					`;      
				}
				tbody.innerHTML=str;
			}
			
			
			function clearIt(id){
				for (var i=0;i<arr.length;i++) {
					if(id===arr[i].id){
						arr.splice(i, 1);
						alert("删除成功")
					}
				}
				localStorage.arr=JSON.stringify(arr);
				showtBody(arr)
			}
			
			
			function atDOWN(id){
				var a1=document.getElementsByClassName("a1");
				for (var i=0;i<arr.length;i++) {
					if(id===arr[i].id){
						if(i>0){
							//							a1.disabled="disabled";
							arr.splice(i-1,2,arr[i],arr[i-1])
						}else{
//							a1.disabled="ture";
						}
//						break;
					}
				}
				localStorage.arr=JSON.stringify(arr);
				showtBody(arr)
			}
			
			function ATup(id){
				var a1=document.getElementsByClassName("a2");
				for (var i=0;i<arr.length;i++) {
					if(id===arr[i].id){
						if(i<arr.length-1){
//							a1.disabled="disabled";
							arr.splice(i,2,arr[i+1],arr[i])
						}else{
//							a1.disabled="ture";
						}
						break;
					}
				}
				localStorage.arr=JSON.stringify(arr);
				showtBody(arr)
			}
			
			
			var clearall=document.getElementById("clearall");
			clearall.onclick=function(){
				arr=[];
				localStorage.arr=JSON.stringify(arr);
				showtBody(arr)
			}
			
		</script>
	</body>
</html>
